<template>
  <section class="chart-container">
    <div class="select_top">
      <el-date-picker
        style="width:15%;margin-right:1%"
        v-model="year"
        type="year"
        placeholder="选择年"
        :clearable="false"
        valueFormat="yyyy"
      >
      </el-date-picker>
      <el-button @click="getsaList">筛选</el-button>
    </div>
    <div class="sa_title">
      年度绩效汇总表
    </div>
    <!-- @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter"
      :cellClassName="tableRowClassName" -->
    <el-table
      :data="salistdata"
      border
      style="width:92%; margin:20px auto;text-align:center"
    >
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="orgname" label="单位名称"></el-table-column>
      <el-table-column v-for="item in tabheadlist" :key="Math.random()" :label="item.c1">
        <el-table-column v-for="item2 in item.c2" :key="Math.random()" :label="item2">
          <template slot-scope="scope">
            {{scope.row[item2]}}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="sum" label="合计">
      </el-table-column>
    </el-table>
  </section>
</template>
<script>

export default {
  data() {
    return {
      ts: this.newStore(),
      year: '',
      saList: [],
      rowIndex: '-1',
      OrderIndexArr: [],
      OrderIndexArr2: [],
      tabheadlist: [],
      salistdata: [],
    };
  },
  mounted() {
    // 去除hover效果
    setTimeout(() => {
      const obj = document.getElementsByClassName('el-table--enable-row-hover')[0];
      let clz = obj.getAttribute('class');
      clz = clz.replace('el-table--enable-row-hover', '');
      obj.setAttribute('class', clz);
    }, 1);
  },
  created() {
    this.year = `${new Date().getFullYear()}`;
    this.getsaList();
  },
  methods: {

    getsaList() {
      this.saList = [];
      const req = {
        handle: '897AEEB66312B81B368784114B8B87D7C21FF198F2CFAFD7',
        year: this.year,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.saList = ts.d.data.operation1;
        this.tabheadlist = [];
        const c1list = [];
        for (let i = 0; i < this.saList.length; i += 1) {
          if (c1list.indexOf(this.saList[i].hash.c1) == -1) {
            c1list.push(this.saList[i].hash.c1);
            this.tabheadlist.push({ c1: this.saList[i].hash.c1 });
          }
        }

        for (let i = 0; i < this.saList.length; i += 1) {
          for (let j = 0; j < this.tabheadlist.length; j += 1) {
            if (this.tabheadlist[j].c1 == this.saList[i].hash.c1) {
              if (!this.tabheadlist[j].c2) {
                this.tabheadlist[j].c2 = [];
              }
              if (this.tabheadlist[j].c2.indexOf(this.saList[i].hash.c2) == -1) {
                this.tabheadlist[j].c2.push(this.saList[i].hash.c2);
              }
            }
          }
        }

        // console.log(this.tabheadlist);

        this.salistdata = [];
        for (let i = 0; i < this.saList.length; i += 1) {
          let isfind = false;
          for (let j = 0; j < this.salistdata.length; j += 1) {
            if (this.saList[i].hash.orgname == this.salistdata[j].orgname) {
              isfind = true;
              this.salistdata[j][this.saList[i].hash.c2] = this.saList[i].hash.score;
              this.salistdata[j].sum = (Number(this.salistdata[j].sum) + Number(this.saList[i].hash.score)).toFixed(2);
            }
          }

          if (!isfind) {
            const d1 = {};
            d1[this.saList[i].hash.c2] = this.saList[i].hash.score;
            d1.orgname = this.saList[i].hash.orgname;
            console.log(d1);
            d1.sum = (0 + Number(this.saList[i].hash.score)).toFixed(2);
            this.salistdata.push(d1);
          }
        }

        // console.log(this.salistdata);
        // this.getOrderNumber();
      });
    },
  },
};
</script>

<style lang="stylus">
.el-table--enable-row-transition .el-table__body td{
  text-align center
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #fff !important;
}
.el-table th>.cell
  text-align center
.chart-container
  min-height 100vh
  background #f1f1f1
  width: 100%;
  float: left;
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.sa_title
  text-align center
  font-size 20px
  border-top 1px solid #cccccc
  padding-top 20px
  margin 20px auto
  width 92%
.line
  border-bottom 1px solid #ccc
  font-size 18px
  text-align center
  margin 20px 0
  padding-bottom 5px
  color black
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>

